<template>
  <el-container>
    <el-main>
      <div ref="content" class="containers">
        <div ref="canvas" class="canvas" />
      </div>
    </el-main>
  </el-container>
</template>
<script>
// 引入相关的依赖
import BpmnModeler from 'bpmn-js/lib/Modeler'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

export default {
  data () {
    return {
      bpmnModeler: null,
      container: null,
      canvas: null
    }
  },
  mounted () {
    // 获取到属性ref为“content”的dom节点
    this.container = this.$refs.content
    // 获取到属性ref为“canvas”的dom节点
    const canvas = this.$refs.canvas
    // 建模，官方文档这里讲的很详细
    this.bpmnModeler = new BpmnModeler({
      container: canvas,
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      }
    })
    this.openDiagram(this.bpmnModeler)
  },
  methods: {
    openDiagram (bpmnModeler) {
      const bpmnXmlStr = '<?xml version="1.0" encoding="UTF-8"?>\n' +
			'<definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:signavio="http://www.signavio.com" id="sid-0b0aaa25-3baf-4875-9d7a-0907d599a9ef" targetNamespace="http://www.omg.org/spec/BPMN/20100524/MODEL" exporter="Camunda Modeler" exporterVersion="3.4.1" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">\n' +
			'<dataStore id="init_bpmn" name="Financial Accounting System" isUnlimited="false">\n' +
			'<dataState id="DataState_1" />\n' +
			'</dataStore>\n' +
			'<message id="foxMessage_en" name="foxMessage_en" />\n' +
			'<process id="init_bpmn_id" name="init_bpmn_name" isExecutable="false">\n' +
			'<startEvent id="StartEvent_1awdmg3" />\n' +
  			'</process>\n' +
  			'<bpmndi:BPMNDiagram id="BPMNDiagram_73">\n' +
    		'<bpmndi:BPMNPlane id="BPMNPlane_73" bpmnElement="init_bpmn_id">\n' +
      		'<bpmndi:BPMNShape id="StartEvent_1awdmg3_di" bpmnElement="StartEvent_1awdmg3">\n' +
       		'<dc:Bounds x="152" y="82" width="36" height="36" />\n' +
      		'</bpmndi:BPMNShape>\n' +
    		'</bpmndi:BPMNPlane>\n' +
  			'</bpmndi:BPMNDiagram>\n' +
			'</definitions>\n'
      bpmnModeler.importXML(bpmnXmlStr, function (err) {
        if (err) {
          return console.error('无法导入BPMN 2.0流程图', err)
        }
        const canvas = bpmnModeler.get('canvas')
        canvas.zoom('fit-viewport')
        canvas.addMarker('init_bpmn_id')
      })
    }
  }
}
</script>
<style>
.el-container {
	position: absolute;
	background-color: #ffffff;
	width: 100%;
	height: 100%;
}
.containers {
	position: absolute;
	background-color: #ffffff;
	width: 100%;
	height: 100%;
}
.canvas{
	width: 100%;
	height: 100%;
}
.panel{
	position: absolute;
	right: 0;
	top: 0;
	width: 300px;
}
</style>
